<template>
<h2>计数器示例 {{upperMessage}}</h2>
count: {{ countStore.count }}<br/>
doubleCount: {{ doubleCount }}<br/>
<select v-model.trim.number="num">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<button @click="increment">+</button>
<button @click="decrement">-</button>

</template>
<script setup lang="ts">
import { ref } from 'vue'
import { storeToRefs } from 'pinia'

import useCountStore from '@/store/count'

let num = ref(1)

const countStore = useCountStore()


const { count, name, message, upperMessage, doubleCount } = storeToRefs(countStore)
// 只有需要的变量才转ref
console.log(storeToRefs(countStore));
console.log(count, name, message);

const increment = () => {
  countStore.increment(num.value)
}
const decrement = () => {
  countStore.decrement(num.value)
}

</script>
<style lang="scss" scoped>
select {
  width: 100px;
  margin-right: 10px;
  height: 30px;
}

button {
  margin-right: 10px;
  height: 30px;
}
</style>
